<template>
  <view>
    <view class="header">
      <u-navbar auto-back title="支付宝绑定" title-style="color:#fff" left-icon-color="#fff" bgColor="background:rgba(0,0,0,0)"></u-navbar>
    </view>
    <view class="edit_box">
      <u-form labelPosition="left" :model="formData" :rules="rules" ref="form1">
        <u-form-item label="姓名" prop="userInfo.aliPay" borderBottom ref="item1">
          <up-input v-model="formData.aliPay" placeholder="输入支付宝姓名" border="bottom"> </up-input>
        </u-form-item>
        <u-form-item label="账号" prop="userInfo.aliPay" borderBottom ref="item1">
          <up-input v-model="formData.aliPay" placeholder="请输入支付宝账号" border="bottom"> </up-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="bottomBox">
      <u-button type="primary" shape="circle" @click="submit">立即绑定</u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const formData = ref({
  aliPay: "",
  realName: "",
  userId: uni.getStorageSync("userId"),
});
const rules = ref({});
const submit = async () => {
  uni.showToast({
    title: "修改成功",
    icon: "success",
    duration: 2000,
    complete() {
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    },
  });
};
</script>

<style lang="less" scoped>
.edit_box {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border-radius: 32rpx;
  margin: 20rpx 28rpx;
  padding: 32rpx 40rpx;
}
/deep/.u-input {
  padding: 24rpx 0px !important;
}
.edit_box {
  margin-top: -200rpx;
}
.bottomBox {
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 20rpx;
}
</style>
